<template>
  <div class="favorite-box">
    <div class="favorite-box-header">
      <h1>博客管理</h1>
      <small class="">收藏夹</small>
      <div>
        <ul class="content-header-nav">
          <li>
            后台管理
            <i class="el-icon-arrow-right"></i>
          </li>
          <li>
            博客管理
            <i class="el-icon-arrow-right"></i>
          </li>
          <li>收藏夹</li>
        </ul>
      </div>
    </div>

    <div class="favorite-container">
      <div style="margin: 0 auto">
        <el-table
          :data="favoriteArticle"
          style="width: 100%; font-size: 12px !important"
          size="medium"
        >
          <el-table-column label="序号" width="100" type="index" align="center">
          </el-table-column>
          <el-table-column
            label="标题"
            width="180"
            prop="articleTitle"
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="简介"
            width="180"
            prop="articleDescription"
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="类型"
            width="100"
            prop="articleClassify"
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="创建时间"
            width="180"
            prop="articleCreateTime"
            align="center"
          >
          </el-table-column>

          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
              <div style="display: flex">
                <el-button
                  style="margin-right: 5px"
                  size="mini"
                  @click="showFavorite(scope.row.articleId)"
                >
                  查看博客
                </el-button>
                <el-popconfirm
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  @confirm="deleteFavorite(scope.$index, scope.row.articleId)"
                  title="确定取消收藏吗?"
                >
                  <el-button slot="reference" size="mini" type="danger"
                    >取消收藏</el-button
                  >
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            style="margin: 0 auto"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[2, 6, 10, 15]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="userFavoriteArticleTotal"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ArticleApiRequest from "@/api/ArticleApiRequest";
const articleApiRequest = new ArticleApiRequest();
export default {
  data() {
    return {
      favoriteArticle: [],
      pageSize: 6, // 组件加载的时候一页显示多少条数据
      userFavoriteArticleTotal: 10, // 动态获取的当前用户的文章数量
      currentPage: 1,
      uid: "",
    };
  },
  methods: {
    getFavoriteArticle(data) {
      articleApiRequest.getUserFavoriteArticle(data).then((res) => {
        this.favoriteArticle = res.data.articleMsgVoList;
        this.userFavoriteArticleTotal = res.data.starCount;
      });
    },

    // 修改每页显示行数
    handleSizeChange(newSize) {
      this.currentPage = 1;
      let data = {
        userId: this.uid,
        offset: 0,
        limit: newSize,
      };
      // 将每页显示的pageSize修改
      this.pageSize = newSize;
      this.getFavoriteArticle(data);
    },
    // 点击下一页
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      let data = {
        userId: this.uid,
        offset: (this.currentPage - 1) * this.pageSize,
        limit: this.pageSize,
      };
      this.getFavoriteArticle(data);
    },
    // index: 点击的序列号  row行内的信息
    showFavorite(id) {
      this.$router.push({
        name: "blog",
        params: {
          id,
        },
      });
    },
    deleteFavorite(index, id) {
      let data = {
        articleId: id,
        userId: JSON.parse(localStorage.getItem("store")).userInfo.uid,
      };
      articleApiRequest.unStarArticle(data).then((res) => {
        if (res.code === 20002) {
          this.$message({
            type: "success",
            message: "取消收藏成功",
          });
          this.favoriteArticle.splice(index, 1);
        }
        if (res.code === 40004) {
          this.$message({
            type: "error",
            message: "当前收藏可能不存在哦",
          });
        }
      });
    },
  },
  mounted() {
    // 获取当前用户的收藏信息
    this.uid = JSON.parse(localStorage.getItem("store")).userInfo.uid;
    let data = {
      userId: this.uid,
      offset: 0,
      limit: 6,
    };
    this.getFavoriteArticle(data);
  },
};
</script>

<style scoped lang="scss">
.favorite-box {
  .favorite-box-header {
    position: relative;
    padding: 15px 15px 0 15px;
    background-color: transparent !important;
    h1 {
      font-size: 24px;
      font-weight: 400;
    }
    small {
      margin-left: 5px;
      font-size: 15px;
    }
    h1,
    small,
    ul {
      display: inline-block;
    }
    .content-header-nav {
      position: absolute;
      top: 30px;
      right: 15px;
      float: right;
      li:first-child {
        font-weight: 700;
        color: #303133;
      }
      li {
        color: #606266;
        float: left;
        font-size: 12px;
      }
    }
  }
  .favorite-container {
    display: flex;
    position: relative;
    border-radius: 3px;
    background: #fff;
    border-top: 3px solid #3c8dbc;
    padding: 20px;
    margin-top: 20px;

    margin-bottom: 20px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  }
}
.pagination {
  display: flex;
  margin-top: 20px;
}
</style>
